<template>
	<view class="home">
		<view class="top">
			<image src="/static/banner.jpg" mode="aspectFill" class="bg"></image>
			<view class="box flex-center">
				<!-- <navigator url="/pages/self/index" hover-class="none" class="self flex-center">
					<image src="/static/self.png" mode="widthFix"></image>
				</navigator> -->
				<form @submit="submitForm" class="flex-center-column">
					<view class="card flex-center">
						<view class="input flex" @click="goSearch('start')">
							<image src="/static/pos-s.png" mode="widthFix"></image>
							<input type="text" placeholder="出发城市" name="from_city" disabled v-model="fromC">
						</view>
						<image src="/static/arrow-both.png" mode="widthFix" class="both"></image>
						<view class="input flex" @click="goSearch('end')">
							<image src="/static/pos-e.png" mode="widthFix"></image>
							<input type="text" placeholder="到达城市" name="to_city" disabled v-model="toC">
						</view>
					</view>
					<button class="flex-center" form-type="submit">查询车主</button>
				</form>
			</view>
		</view>
		<view class="middle" v-if="newest.id">
			<view class="title flex">
				当前发布
			</view>
			<view class="card flex-between" @click="goInfoList(newest.from_city,newest.to_city)">
				<view>
					<view class="h3">{{newest.from_city}} —> {{newest.to_city}}</view>
					
					<view class="p">时间：{{newest.begin_date}}</view>
					<view class="y">订座/余座: {{newest.seat - newest.remain_seat}}/{{newest.seat}}人</view>
				</view>
				<view class="btn flex-center">查看</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="title flex">
				推荐路线
			</view>
			<view class="card-box flex-between">
				<block v-for="(item,index) in recommedList" :key="index">
					<view class="card flex-between" @click="goInfoList(item.from_city,item.to_city)">
						<view class="city">{{item.from_city}}</view>
						<image src="/static/arrow-right.png" mode="widthFix"></image>
						<view class="city">{{item.to_city}}</view>
					</view>
				</block>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowRoutes: [],
				recommedList:[],//推荐路线
				fromC:'',//出发城市
				toC:'',//到达城市
				type:'',
				newest:{}
			}
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				this.getRouteList();
			}else{
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				setTimeout(()=>{
					this.getRouteList()
				},1000)
			}
			
		},
		onShow() {
			let city = uni.getStorageSync('city');
			if(city){
				if(this.type == 'start'){
					this.fromC = city;
				}else{
					this.toC = city;
				}
			}else{
				this.fromC = '';
				this.toC = '';
			}
			this.getNewestP()
		},
		methods: {
			getNewestP(){
				this.$https.get('public/home').then(res=>{
					console.log(res)
					if(res.ing_car){
						this.newest = res.ing_car;
					}
				})
			},
			getRouteList(){
				this.$https.get('public/city').then(res=>{
					this.recommedList = res.recommendList;
				})
			},
			goSearch(type){
				this.type = type;
				uni.navigateTo({
					url:"/pages/index/searchAddr?type=" + type
				})
			},
			submitForm(e){
				let obj = e.detail.value;
				if(!obj.from_city){
					uni.showToast({
						title:'请选择出发城市',
						icon:'none'
					})
					return
				}
				if(!obj.to_city){
					uni.showToast({
						title:'请选择到达城市',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:`/pages/index/infoLish?title=${obj.from_city} —— ${obj.to_city}`
				})
			},
			goInfoList(fromC,toC){
				
				uni.navigateTo({
					url:`/pages/index/infoLish?title=${fromC} —— ${toC}`
				})
			}
		},
		onTabItemTap() {
			uni.removeStorageSync('city')
		}
	}
</script>

<style lang="less">
	@color: #4CD964;
	page{
		background: #f2f3f4;
	}
	.home{
		.top{
			width: 750rpx;
			height: 750rpx;
			position: relative;
			.bg{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.box{
				position: relative;
				z-index: 1;
				width: 100%;
				height: 100%;
				align-items: flex-end;
				.self{
					position: absolute;
					right:30rpx;
					top:24rpx;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background:	@color;
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
				form{
					margin-bottom: 40rpx;
					.card{
						margin-bottom: 40rpx;
						.input{
							width: 250rpx;
							background: white;
							padding:0 10rpx 0 20rpx;
							height: 70rpx;
							border-radius: 10rpx;
							image{
								width: 60rpx;
								height:auto;
								margin-right: 20rpx;
							}
							input{
								height: 60rpx;
							}
						}
						.both{
							width: 60rpx;
							height: auto;
							margin: 0 20rpx;
						}
					}
					button{
						width: 250rpx;
						height: 70rpx;
						background: @color;
						border-radius: 35rpx;
						color:#fff;
						font-size: 32rpx;
					}
				}
			}
		}
		.middle{
			padding: 20rpx 30rpx;
			margin: 30rpx 0;
			background: white;
			.title{
				font-size: 34rpx;
				font-weight: bold;
				&::before{
					content:"";
					display: inline-block;
					width: 8rpx;
					height: 35rpx;
					background: @color;
					margin-right: 20rpx;
				}
			}
			.card{
				padding-top: 24rpx;
				.h3{
					font-size: 30rpx;
					font-weight: bold;
				}
				.p{
					font-size: 28rpx;
					color:#333;
					margin: 6rpx 0;
				}
				.y{
					color: #007AFF;
					font-size: 28rpx;
				}
				.btn{
					width: 80rpx;
					border:1px solid #007AFF;
					font-size: 30rpx;
					height: 50rpx;
					color:#007AFF;
				}
			}
		}
		.bottom{
			padding: 40rpx 30rpx;
			background: white;
			.title{
				font-size: 34rpx;
				font-weight: bold;
				&::before{
					content:"";
					display: inline-block;
					width: 8rpx;
					height: 35rpx;
					background: @color;
					margin-right: 20rpx;
				}
			}
			.card-box{
				flex-wrap: wrap;
				margin-top: 30rpx;
				.card{
					width:330rpx ;
					height: 70rpx;
					background: #eee;
					padding: 0 20rpx;
					box-sizing:border-box;
					margin-bottom: 30rpx;
					image{
						width: 50rpx;
						height: auto;
					}
					.city{
						font-size: 30rpx;
						width: 120rpx;
					}
				}
			}
			
		}
	}
</style>
